<template>
	
	
	
	<div class="big">
		<el-tabs type="border-card">
		    <el-tab-pane label="资产账单">
				
				<div class="mb16">
							<button class="gjsx" @click="showClick">高级筛选 <img src="../img/高级筛选.png" style="height: 15px;"/></button>
							<div class="ml1">
								<el-input type="text" maxlength="20" placeholder="输入项目名称/房号/费用编号" class="el-input"/>
								<el-button type="primary"  style="height: 40px; background-color: white;color: black; border: none;">搜索</el-button>
							</div>
						</div>
				 <div class="xiala" v-show="showXiala">
						    <form>
						    	<el-form-item label="类型" class="xz">
						    	      <el-select  placeholder="全部">
						    	      </el-select>
						    	</el-form-item>
						    	<el-form-item label="操作人" class="xz">
						    	    <el-select  placeholder="全部">
						    	    </el-select>
						    	</el-form-item>
						    				
						    	<p style="width: 500px; height: 1px;">&nbsp;</p>
						    	<el-form-item label="操作时间" class="xz" style="width: 800px;">
						    		<el-form-item>
						    		      <el-col :span="11">
						    		        <el-date-picker
						    		          type="date"
						    		          placeholder="开始"
						    		          style="width: 100%"
						    		        />
						    		      </el-col>
						    		      <el-col :span="2" class="text-center">
						    		        <span class="text-gray-500">至</span>
						    		      </el-col>
						    		      <el-col :span="11">
						    		        <el-date-picker
						    		          placeholder="结束"
						    		          style="width: 100%"
						    		        />
						    		      </el-col>
						    		    </el-form-item>
						    	</el-form-item>
						    
						    	<el-form-item label="操作方式" class="xz" style="width: 800px;">
						    	    <el-select  placeholder="全部" style="width: 200px;right: 5px;">
						    	    </el-select>
						    		<el-input  placeholder="Approved by" clearable />
						    	</el-form-item>
						    
						    	
						    	<el-form-item label="收支方式" class="xz" style="width: 800px;">
						    	    <el-select  placeholder="全部" style="width: 200px;right: 5px;">
						    	    </el-select>
						    		<el-input  placeholder="Approved by" clearable />
						    	</el-form-item>
						    	
						    	
						    	<el-button class="btn1zc">重置</el-button><el-button class="btn2zc">查询</el-button>
						    </form>
							<br />
						</div>
				<div class="all">
					<br />
						<el-button type="primary" class="addzc" >催缴全部账单<span>(11)</span></el-button>
						<el-button type="primary" class="addxz" v-if="hasSelection">催缴选中账单<span>(11)</span></el-button>
						
					
					<div class="tongji">
						<span >欠费账单xx条</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						<span>欠费金额</span>
						<span style="color: red;">XXX</span>
					</div>
					
					<div class="gengduo">
						<el-popconfirm
						    width="220"
						    confirm-button-text="OK"
						    cancel-button-text="No, Thanks"
						    :icon="InfoFilled"
						    icon-color="#626AEF"
						    title="是否导出数据"
						  >
						    <template #reference>
						      <el-button>更多</el-button>
						    </template>
						  </el-popconfirm>
					</div>
					
				  <el-table :data="tableData" style="width: 100%; margin-top: -50px;" @selection-change="handleSelectionChange">
				    <el-table-column type="selection" width="55" />
				    <el-table-column label="Date" width="120">
				      <template #default="scope">{{ scope.row.date }}</template>
				    </el-table-column>
				    <el-table-column property="name" label="Name" width="120" />
				    <el-table-column
				      property="address"
				      label="use show-overflow-tooltip"
				      width="240"
				      show-overflow-tooltip
				    />
				    <el-table-column property="address" label="address" />
				  </el-table>
				</div>
				
				
			</el-tab-pane>
		    <el-tab-pane label="催缴人账单">
				<cuijiaorenzhangdanVue></cuijiaorenzhangdanVue>
			</el-tab-pane>
		  </el-tabs>
		<br>
	
	</div>
</template>

<script lang="ts" setup>
	import { ref,reactive,computed } from 'vue'
	import { ElTable } from 'element-plus'
	import { InfoFilled } from '@element-plus/icons-vue'
	import cuijiaorenzhangdanVue from './cuijiaorenzhangdan.vue';
	// import { Search } from '@element-plus/icons-vue'
	
	const loading = ref(true)
	setTimeout(() => {
	  loading.value = false;
	}, 3500);
	
	
	const selectedRows = ref([]);
	
	const handleSelectionChange = (selection) => {
	  selectedRows.value = selection;
	};
	
	const hasSelection = computed(() => selectedRows.value.length > 0);
	
	
	const form = reactive({
	  name: '',
	  region: '',
	  date1: '',
	  date2: '',
	  delivery: false,
	  type: [],
	  resource: '',
	  desc: '',
	})
	


	
	
	const tableData = [
	  {
	    date: '2016-05-03',
	    name: 'Tom',
	    state: 'California',
	    city: 'Los Angeles',
	    address: 'No. 189, Grove St, Los Angeles',
	    zip: 'CA 90036',
	    tag: 'Home',
	  },
	  {
	    date: '2016-05-02',
	    name: 'Tom',
	    state: 'California',
	    city: 'Los Angeles',
	    address: 'No. 189, Grove St, Los Angeles',
	    zip: 'CA 90036',
	    tag: 'Office',
	  },
	  {
	    date: '2016-05-04',
	    name: 'Tom',
	    state: 'California',
	    city: 'Los Angeles',
	    address: 'No. 189, Grove St, Los Angeles',
	    zip: 'CA 90036',
	    tag: 'Home',
	  },
	  {
	    date: '2016-05-01',
	    name: 'Tom',
	    state: 'California',
	    city: 'Los Angeles',
	    address: 'No. 189, Grove St, Los Angeles',
	    zip: 'CA 90036',
	    tag: 'Office',
	  },
	]
	
	const showXiala = ref(false);
	
	
	const showClick = () => {
	  console.log("aaa");
	  showXiala.value = !showXiala.value;  
	};
	

</script>

<style>
	
	.addzc{
		position: relative;
		right: 480px;
		top: 0px;
		background-color: rgb(239, 109, 109);
		height: 40px;
		width: 158px;
		border: 0px solid;
		color: white;
	}
	
	.addxz{
		position: relative;
		right: 650px;
		top: 0px;
		background-color: #00c36d;
		height: 40px;
		width: 158px;
		border: 0px solid;
		color: white;
		
	}
	
	.all{
		width: 1370px;
		border: 2px solid gainsboro;
		height: 650px;
		border-radius: 10px; 
		background-color: white;
		
	}
	
	
	
	
	
	.xiala {
			background-color: white;
			width: 1340px;
			height: 320px;
			overflow: auto;
			padding: 15px;
			margin-bottom: 10px;
			border: 2px solid gainsboro;
			border-radius: 10px; 
		}
	.xiala2{
		background-color: white;
		width: 1340px;
		height: 120px;
		overflow: auto;
		padding: 15px;
		margin-bottom: 10px;
		border: 2px solid gainsboro;
		border-radius: 10px; 
	}
		.xz{
			width: 300px;
			float: left;
			margin-bottom: 0;
			margin-right: 32px;
			height: 56px;
			align-items: center;
			text-align: left;
		}
		.text-center{
			text-align: center;
		}
		.btn1zc{
			position: relative;
			bottom: -230px;
			right:980px;
			width: 100px;
			height: 40px;
			color: #7e8081;
			background-color: #fafafa;
			border: none;
			font-size: 14px;
			padding: 10px;
		}
		.btn2zc{
			position: relative;
			bottom: -230px;
			right:980px;
			width: 100px;
			height: 40px;
			color: #fff;
			background-color: #00c36d;
			border-color: #00c36d;
			font-size: 14px;
		}
		.btn2-1{
			position: relative;
			bottom: -70px;
			left: -1100px;
			right:1000px;
			width: 100px;
			height: 40px;
			color: #7e8081;
			background-color: #fafafa;
			border: none;
			font-size: 14px;
			padding: 10px;
		}
		.btn2-2{
			position: relative;
			bottom: -30px;
			right:980px;
			width: 100px;
			height: 40px;
			color: #fff;
			background-color: #00c36d;
			border-color: #00c36d;
			font-size: 14px;
		}
	.gjsx{
			background-color: white;
			padding: 10px 15px;
			color: #00C36D;
			width: 146px;
			height: 40px;
		}
		.mb16{
			margin-bottom: 16px;
			display: -webkit-box;
			display: flex;
			justify-content: flex-end;
			width: 1315px;
		}
		.feiyongmingxi{
			margin-bottom: 16px;
			display: -webkit-box;
			display: flex;
			justify-content: flex-end;
			width: 1315px;
		}
		.ml1{
			width: 300px;
			border: none;
			margin-left: 10px;
			display: inline-table;
		}
		.el-input{
			width: 200px;
		}
		.big{
			background-color: white;
		}
		
		.example-showcase .el-dropdown-link {
		  cursor: pointer;
		  color: var(--el-color-primary);
		  display: flex;
		  align-items: center;
		}
		.example-showcase .el-loading-mask {
		  z-index: 1;
		}
		.tongguo{
			color: #00C36D;
			margin-top: 5px;
		}
		
		.tcanniu{
			background-color: #00c36d;
			color: white;
			width: 100px;
			height: 40px;
		}
		
		.xialakuang{
			width: 350px;
		}
		
		
		.tongji{
			background-color: rgb(250, 250, 250);
			width: 420px;
			height: 50px;
			position: relative;
			top: -50px;
			left: 800px;
			line-height: 50px;
		}
		.gengduo{
			width: 80px;
			height: 30px;
			position: relative;
			top: -90px;
			left: 1260px;
		}

	
</style>